<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/9/19 0019
  Time: 下午 1:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>教师管理</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
  <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
  <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="doc-content">
  <div class="panel">
    <div class="panel-header">
      <h3>教师信息</h3>
    </div>
    <div class="panel-body">
      <form id="searchForm" class="form-horizontal well" action="/teacher/find" method="post">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">教师姓名：</label>

            <div class="controls">
              <input type="text" class="control-text" name="name">
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label">所交课程：</label>

            <div class="controls">
              <select id="lessons" name="lessonId" class="input-normal bui-form-field-select bui-form-field"
                      aria-disabled="false" aria-pressed="false">
                <option value="">请选择课程</option>
                <c:forEach items="${lessons}" var="p">
                  <option value="${p._id}">${p.name}</option>
                </c:forEach>
              </select>
            </div>
          </div>
          <div class="span3 offset2">
            <input value="搜索" type="submit" id="btnSearch" class="button button-primary"/>
          </div>
        </div>
      </form>

      <div class="row">
        <div class="span21 offset3 control-row-auto">
          <div id="grid"></div>
          <input type="hidden" name="teacher">
        </div>
      </div>


      <div id="content" class="hide">
        <form id="J_Form" class="form-horizontal bui-form-horizontal bui-form bui-form-field-container">
          <div class="row" style="display: none">
            <div class="control-group span8">
              <label class="control-label"><s>*</s>id：</label>

              <div class="controls">
                <input name="_id" type="text" id="_id" class="input-normal control-text bui-form-field"
                       aria-disabled="false" aria-pressed="false">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span8">
              <label class="control-label"><s>*</s>教师姓名：</label>

              <div class="controls">
                <input id="name" name="name" type="text" data-rules="{required:true}"
                       class="input-normal control-text bui-form-field" aria-disabled="false"
                       aria-pressed="false">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span8">
              <label class="control-label"><s>*</s>电话：</label>

              <div class="controls">
                <input name="phone" id="phone" type="text" data-rules="{required:true}"
                       class="input-normal control-text">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span8">
              <label class="control-label">支付宝：</label>

              <div class="controls">
                <input name="alipay" id="alipay" type="text"
                       class="input-normal control-text">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span8">
              <label class="control-label">银行账号：</label>

              <div class="controls">
                <input name="bank_num" id="bank_num" type="text"
                       class="input-normal control-text">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span8">
              <label class="control-label">开户行：</label>

              <div class="controls">
                <input name="bank" id="bank" type="text"
                       class="input-normal control-text">
              </div>
            </div>
          </div>
        </form>
      </div>
      <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="/static/bui/js/bui.js"></script>
      <script type="text/javascript" src="/static/bui/js/config.js"></script>
      <script type="text/javascript">
        BUI.use('common/page');
        <%--</script>--%>
        <%--<script type="text/javascript">--%>
        BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
          var columns = [
                    {title: '教师姓名', dataIndex: 'name', width: '12%'},
                    {title: '电话', dataIndex: 'phone', width: '18%'},
                    {title: '支付宝', dataIndex: 'alipay', width: '18%'},
                    {title: '银行账户', dataIndex: 'bank_num', width: '30%'},
//                    {title: '开户支行', dataIndex: 'bank', width: '18%'},
                    {
                      title: '操作', width: '30%', renderer: function () {
                      var editStr = '<span class="grid-command btn-edit"><i class="icon-edit"></i>编辑</span>',
                              str = '<span  class="grid-command btn-role"><i class="icon-cog"></i>配置信息</span>',
                              infoStr = '<span  class="grid-command btn-info"><i class="icon-info-sign"></i>详情</span>';
                      return editStr + infoStr + str;
                    }
                    }
                  ],
          //默认的数据
                  data = [
                    <c:forEach items="${teachers}" var="r">
                    {
                      _id: '${r._id}',
                      name: '${r.name}',
                      phone: '${r.phone}',
                      alipay:'${r.alipay}',
                      bank_num: '${r.bank_num}',
                      bank: '${r.bank}'
                    },
                    </c:forEach>
                  ],
                  store = new Data.Store({
                    data: data,
                    pageSize: 20
                  }),
                  editing = new Grid.Plugins.DialogEditing({
                    contentId: 'content',
                    triggerCls: 'btn-edit',
                    editor: {
                      focusable: false,
                      success: function () {
                        var editType = editing.get('editType'),
                                edtor = this,
                                form = edtor.get("form");
                        form.valid();
                        if (form.isValid()) {
                          this.close();
                          if (editType == 'add') {
                            $.ajax({
                              type: 'post',
                              url: '/teacher/addTeacher',
                              data: $("#J_Form").serialize(),
                              success: function (msg) {
                                if (msg == 'success') {
                                  msg = "添加成功！";
                                  BUI.Message.Alert(msg, function () {
                                    window.location.href = '/teacher/list.do';
                                  }, 'success')
                                } else {
                                  msg = "添加失败,你没有权限或者该教师已经注册";
                                  BUI.Message.Alert(msg, function () {
                                    window.location.href = '/jsp/error/noAuthority.jsp';
                                  }, 'error')
                                }

                              }
                            })
                          } else {
                            $.ajax({
                              type: 'post',
                              url: '/teacher/updateTeacher',
                              data: $("#J_Form").serialize(),
                              success: function (msg) {
                                if (msg == 'success') {
                                  msg = '修改成功！';
                                  BUI.Message.Alert(msg, function () {
                                    window.location.href = '/teacher/list.do';
                                  }, 'success')
                                } else {
                                  msg = '修改失败';
                                  BUI.Message.Alert(msg, function () {
                                    window.location.href = '/jsp/error/noAuthority.jsp';
                                  }, 'error')
                                }
                              }
                            })
                          }
                        }
                      }
                    }
                  }),
                  grid = new Grid.Grid({
                    render: '#grid',
                    columns: columns,
                    width: '100%',
//                    forceFit: true,
                    plugins: [Grid.Plugins.AutoFit],
                    store: store,
                    bbar: {
                      pagingBar: true,
                      elCls: 'image-pbar'
                    },
                    plugins: [Grid.Plugins.CheckSelection, editing],
                    tbar: {
                      items: [{
                        btnCls: 'button button-small',
                        text: '<i class="icon-plus"></i>添加',
                        listeners: {
                          'click': addFunction
                        }
                      },
                        {
                          btnCls: 'button button-small',
                          text: '<i class="icon-remove"></i>删除',
                          listeners: {
                            'click': delFunction
                          }
                        }]
                    }
                  });
          grid.render();

          grid.on('cellclick', function (ev) {
            var record = ev.record,
                    target = $(ev.domTarget);
            if (target.hasClass('btn-role')) {
              window.location.href = '/teacher/configure?teacherId=' + record._id
            }
            if(target.hasClass('btn-info')){
              window.location.href = '/teacher/info?teacherId=' + record._id
            }
          })

//          function exportFunction() {
//            window.location.href = "/role/export.do";
//          }

          function addFunction() {
            var newData = {};
            editing.add(newData); //添加记录后，直接编辑
          }

          function delFunction() {
            var selections = grid.getSelection();
            delItems(selections);
          }

          function delItems(items) {
            var _ids = [];
            BUI.each(items, function (item) {
              _ids.push(item._id)
            });
            if (_ids.length) {
              BUI.Message.Confirm('确认要删除吗？', function () {
                $.ajax({
                  type: 'POST',
                  url: '/teacher/delTeacher?_ids=' + _ids,
                  success: function (msg) {
                    if (msg == 'success') {
                      msg = "删除成功！";
                      BUI.Message.Alert(msg, function () {
                        window.location.href = '/teacher/list.do';
                      }, 'success')
                    }else {
                      msg = '删除失败'
                      BUI.Message.Alert(msg, function () {
                        window.location.href = '/jsp/error/noAuthority.jsp';
                      }, 'error')
                    }
                  }
                })
              })
            }
          };
          var form = new Form.HForm({
            srcNode: '#J_Form'
          });
        });
      </script>
    </div>
  </div>
</div>
</body>
</html>
